<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				找人
			</view>
			<view class="head_right">
				说明
			</view>
		</view>

		<view class="head-big-box">
			<image class="bannerImg" src="http://www.huihejituan.com/tripPictstorage/qmore/banner/20191030134408.png" mode="aspectFill"></image>
		</view>
		<view class="padding-box">
			<scroll-view class="scroll-box match-view" scroll-x>
				<view class="padding-scroll-box">
					<view @tap="match('各国境友')" class="match-view-item">
						<image src="/static/jingyu/geguo.png"></image>
						<text>各国境友</text>
					</view>
					<view @tap="match('助学师')" class="match-view-item">
						<image src="/static/jingyu/zhuxue.png"></image>
						<text>助学师</text>
					</view>
					<view @tap="match('优质用户')" class="match-view-item">
						<image src="/static/jingyu/youzhi.png"></image>
						<text>优质用户</text>
					</view>
					<view @tap="match('附近的人')" class="match-view-item">
						<image src="/static/jingyu/fujin.png"></image>
						<text>附近的人</text>
					</view>
					<view @tap="match('通讯录')" class="match-view-item">
						<image src="/static/jingyu/tongxunlu.png"></image>
						<text>手机联系人</text>
					</view>
					<view @tap="match('同学')" class="match-view-item">
						<image src="/static/jingyu/tongxue.png"></image>
						<text>同学</text>
					</view>
					<view @tap="match('同事')" class="match-view-item">
						<image src="/static/jingyu/tongshi.png"></image>
						<text>同事</text>
					</view>
					<view @tap="match('老乡')" class="match-view-item">
						<image src="/static/jingyu/laoxiang.png"></image>
						<text>老乡</text>
					</view>
				</view>

			</scroll-view>
			<view v-for="(item,index) in items" :key="index" class="findUser-item">
				<view class="findUser-item-head">
					<text class="findUser-item-label" v-text="item.type"></text>
					<view @tap="more(index)" class="findUser-item-more">
						<text>更多</text>
						<image src="/static/right.png"></image>
					</view>
				</view>
				<view v-if="info!=null" class="findUser-item-main">
					<view @tap="myToUserDetail(item2.user_id)" v-if="index==0" v-for="(item2,index2) in info" :key="index2" class="scroll-item">
						<view class="avatar-container">
							<image mode="aspectFill" :src="item2.avatar"></image>
							<image class="country" :src="item2.national_flag" mode=""></image>
							<!-- <text v-text="item2.user_identity"></text> -->
							<!-- <view class="time">
								上午10:36:11
							</view> -->
						</view>
						<view class="right_body">
							<view class="title_box">
								<view class="nickname-and">
									<text class="nickname " v-text="item2.nick_name"></text>
								</view>
								<view class="img-sex">
									<image class="image_box" v-if="item2.sex==2" src="/static/woman.png"></image>
									<image class="image_box" v-else src="/static/man.png"></image>
								</view>
								<view class="authentication_box" v-if="item2.identity_auth!=''">
									实名认证
								</view>
								<view class="authentication_box2" v-else>
									未认证
								</view>
								<!-- <view class="authentication_box">
										<view class="renzheng"><text v-text="item2.user_identity"></text></view>
									</view> -->
								<view class="authentication_box shenfen" v-if="item2.overseas_auth" v-text="item2.overseas_identity_name"></view>
								<view class="authentication_box2 shenfen" v-else>
									境外身份
								</view>
							</view>

							<!-- <text v-text="item2.address_str" class=""></text> -->

							<view class="common_ys ">
								国籍:
								<text v-if="item2.country!=''" v-text="item2.country"></text>
								<text v-else>未知</text>
								掌握语言:
								<text class="textOverflow" v-if="item2.languages!=''">{{item2.languages}}</text>
								<text v-else>未知</text>
							</view>
							<view class="common_ys ">
								偏好:
								<text v-if="item2.preference!=''" v-text="item2.preference"></text>
								<text v-else>未知</text>
								<view class="guanxi" v-show="item2.relation_chain" v-text="item2.relation_chain"></view>
								<!-- <view class="" v-show="item2.distance!=null">{{item2.distance}}km</view> -->
							</view>
						</view>
						<view class="address-and">
							<view class="last_time" v-if="item2.log_out_time" v-text="item2.log_out_time"></view>
							<view class="last_time" v-else>未知</view>
							<image src="/static/jingyou/liaoliao.png" mode=""></image>
						</view>


					</view>
					<view @tap="myToUserDetail(item3.user_id)" v-if="index==1" v-for="(item3,index3) in info2" :key="index3" class="scroll-item">
						<view class="avatar-container">
							<image mode="aspectFill" :src="item3.avatar"></image>
							<image class="country" :src="item3.national_flag" mode=""></image>

						</view>
						<view class="right_body">
							<view class="title_box">
								<view class="nickname-and">
									<text class="nickname" v-text="item3.nick_name"></text>
								</view>
								<view class="img-sex">
									<image class="image_box" v-if="item3.sex==2" src="/static/woman.png"></image>
									<image class="image_box" v-else src="/static/man.png"></image>
								</view>
								<view class="authentication_box" v-if="item3.identify!=''">
									实名认证
								</view>
								<view class="authentication_box2" v-else>
									未认证
								</view>

								<view class="authentication_box shenfen" v-if="item3.overseas_auth" v-text="item3.overseas_identity_name"></view>
								<view class="authentication_box2 shenfen" v-else>
									境外身份
								</view>
							</view>

							<text v-text="item3.address_str"></text>

							<view class="common_ys ">
								国籍:
								<text v-if="item3.country!=''" v-text="item3.country"></text>
								<text v-else>未知</text>
								掌握语言:
								<text class="textOverflow" v-if="item3.languages!=''">{{item3.languages}}</text>
								<text v-else>未知</text>
							</view>
							<view class="common_ys ">
								偏好:
								<text v-if="item3.preference!=''" v-text="item3.preference"></text>
								<text v-else>未知</text>
								<view class="guanxi" v-show="item3.relation_chain" v-text="item3.relation_chain"></view>
								<!-- <view class="" v-show="item3.distance!=null">{{item3.distance}}km</view> -->
							</view>
						</view>
						<view class="address-and">
							<view class="last_time" v-if="item3.log_out_time" v-text="item3.log_out_time"></view>
							<view class="last_time" v-else>未知</view>
							<image src="/static/jingyou/liaoliao.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: '', //经度
				latitude: '', //纬度

				items: [{
						type: '#猜你喜欢#'
					},
					{
						type: '#全球当红#'
					},

				],
				info: null,
				info2: '',
				time: '',
				myInfo: '',
				addressInfo: null, //定位信息
				key: '1d31d958050c47a1c7bcaeeb7e47ebdd', //高德地图key


			}
		},


		onLoad() {
			this.getUserlist()
			
		},

		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},

			getUserlist() {
				//拉取用户列表
				var preference = this.myInfo.preference;
				if (preference == null || preference == "") {
					preference = '交友拍拖'
				}
				var data = {
					is_robot: true,
					preference: preference,
					pageSize: 3,
					searchParam: {
						longitude: this.longitude,
						latitude: this.latitude,
					}
				}
				var me = this;
				this.myAjaxNewPost({ //猜你喜欢
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserListPage',
					data: data,
					successBack: function(res) {
						me.info = res.data.data;
						for (var i = 0; i < me.info.length; i++) {
							me.info[i].distance = parseInt((me.info[i].distance) / 1000)
							me.info[i].log_out_time = me.myDate.getDateDiff(me.info[i].log_out_time)
						}
					}
				})
				this.myAjaxNewPost({ //热门境友
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserListPage',
					data: {
						is_robot: true,
						advertising_position: true,
						searchParam: {
							longitude: this.latitude,
							latitude: this.longitude,
						},
						pageSize: 3,
					},
					successBack: function(res) {

						me.info2 = res.data.data;
						for (var i = 0; i < me.info2.length; i++) {
							me.info2[i].distance = parseInt((me.info2[i].distance) / 1000)
							me.info2[i].log_out_time = me.myDate.getDateDiff(me.info2[i].log_out_time)
						}
					}
				})
			},


			more(index) { //更多列表
				var filter = null;
				if (index == 0) {
					filter = 'like';
				}
				if (index == 1) {
					filter = 'hot';
				}
				uni.navigateTo({
					url: '/pages/Meet/userList/userList?filter=' + filter + '&chineseFilter=' + this.items[index].type
				})
			},

			match(chinese) {
				var search_type = null;
				if (chinese == '各国境友') {
					search_type = ''; //各国境友
				} else if (chinese == '附近的人') {
					search_type = 'nearby';
				} else if (chinese == '通讯录') {
					search_type = 'contacts';
				} else if (chinese == '同学') {
					search_type = 'school';
				} else if (chinese == '同事') {
					search_type = 'company';
				} else if (chinese == '老乡') {
					search_type = 'hometown';
				} else if (chinese == '助学师') {
					search_type = 'master';
				} else if (chinese == '优质用户') {
					search_type = '';
				}
				uni.navigateTo({
					url: '/pages/Meet/userList/userList?search_type=' + search_type + '&chinese=' + chinese
				})
			},
		},
	}
</script>

<style scoped>
	.head {
		height: 128upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
	}

	.head_right {
		color: #46CECF;
		padding-top: 66upx;
		width: 92upx;
		text-align: right;
		opacity: 0;
	}

	.head-big-box {
		background: #FFFFFF;
		color: #999999;
		font-size: 36upx;
		/* position: fixed; */
		margin-top: 150upx;
		width: 100%;
		z-index: 1000;
	}


	.bannerImg {
		width: 100%;
		height: 180upx;
		padding: 0 14upx;
		box-sizing: border-box;
	}

	.padding-box {
		padding-top: 20upx;
	}

	/* 找人 */
	.match-view {
		background: #fff;
		box-sizing: border-box;
		height: 170upx;
	}

	.padding-scroll-box {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		overflow-x: scroll;
		white-space: nowrap;
		padding: 0 24upx;

	}

	.match-view-item {
		width: 100upx;
		text-align: center;
		padding: 24upx;
		border-radius: 10upx;
		float: left;
		font-size: 22upx;
	}

	.match-view-item image {
		width: 82upx;
		height: 82upx;
		display: block;
		margin: 0 auto;
	}


	.findUser-item-main {
		height: 555upx;
	}

	.findUser-item {
		background: #fff;
		padding: 40upx 0 24upx 0;
		margin-top: 20upx;
	}

	.findUser-item-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 40upx;
	}

	.findUser-item-label {
		font-size: 34upx;
		padding-left: 40upx;
	}

	.findUser-item-more {
		display: flex;
		align-items: center;
	}

	.findUser-item-more text {
		font-size: 26upx;
		color: #9A9BA9;
	}

	.findUser-item-more image {
		width: 14upx;
		height: 23upx;
		margin-left: 10upx;
	}

	.shenfen {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120upx;
		margin-left: 10upx;
	}

	.right_body {
		height: 125upx;
	}

	.title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}

	.scroll-item {
		height: 125upx;
		padding: 30upx 40upx;
		border-bottom: 1upx solid #F3F3F3;
		background: #fff;
		position: relative;
	}

	.avatar-container {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;
	}

	.avatar-container image {
		width: 100%;
		height: 100%;
		border-radius: 5upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar-container .country {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.time {
		height: 24upx;
		width: 84upx;
		line-height: 24upx;
		color: #FFFFFF;
		font-size: 14upx;
		background: #999999;
		border-radius: 24upx;
		padding-left: 30upx;
		position: absolute;
		left: 10upx;
		bottom: 0upx;
		opacity: 0.8;
	}


	.item-main {
		height: 125upx;
	}

	.nickname-and {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}

	.img-sex {
		margin-right: 10upx;
	}

	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.authentication_box {
		max-width: 80upx;
		border: 1upx solid #33cbcc;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #33cbcc;
		padding: 0 5upx;
	}

	.authentication_box2 {
		border: 1upx solid #8E8F9F;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #8E8F9F;
		padding: 0 5upx;
	}




	.common_ys {
		width: 400upx;
		font-size: 26upx;
		line-height: 40upx;
		color: #404a4c;
		display: flex;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.common_ys text {
		margin: 0 10upx;
	}

	.textOverflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.last_time {
		font-size: 24upx;
		color: #8E8F9F;
		position: absolute;
		top: 40upx;
		right: 40upx;
	}



	.address-and {
		font-size: 24upx;
		color: #9A9BA9;
		margin-top: 12upx;
	}

	.address-and image {
		width: 55upx;
		height: 55upx;
		position: absolute;
		right: 40upx;
		bottom: 40upx;
	}

	.guanxi {
		margin: 0 30upx;
	}

	.learnHome {
		position: fixed;
		width: 135upx;
		height: 135upx;
		bottom: 250upx;
		right: 30upx;
	}
</style>
